<link rel="stylesheet" type="text/css" href="<?php echo css_url().'vertical_nav_menu_black.css'?>">

<div class="left-nav-bar-container">
    <div class ="vertical-nav-bar">
        <div id="account-management" class="nav-bar-entity selected">Account Management</div>
        <div id="user-information" class="nav-bar-entity expanded">User information</div>
        <div class="nav-bar-tab">
            <div id="edit-contact" class="nav-bar-entity">Edit Contact Information</div>
            <div id="edit-qualification" class="nav-bar-entity">Edit Qualification</div>
            <div id="edit-experience" class="nav-bar-entity">Edit Experience</div>
            <div id="edit-hobbies" class="nav-bar-entity">Edit Hobbies</div>
            <div id="edit-activities" class="nav-bar-entity">Edit Activities</div>
        </div>
    </div>
</div>

<script>
    $('.nav-bar-entity').on('click',function(){
        if($(this).attr('class') != "nav-bar-entity expanded"){
            $(this).siblings('.nav-bar-tab').hide("fast");
        }
    });
    
    $("#account-management").on('click',function(){
        $(".nav-bar-entity").attr('class', 'nav-bar-entity');
        $(this).attr('class', 'nav-bar-entity selected');
        $.get("<?php echo site_url().'/pages/us3_account_management_form' ?>", function(data){
                $(".main-section").empty();
                $(".main-section").html(data);
        });
    });
    
    $("#user-information").on('click',function(){
        $(".nav-bar-entity").attr('class', 'nav-bar-entity');
        $(this).attr('class', 'nav-bar-entity selected');
        $(this).next().show("slow");
    });
    
    $("#edit-contact").on('click',function(){
        $(this).parent().show();
        $(".nav-bar-entity").attr('class', 'nav-bar-entity');
        $(this).attr('class', 'nav-bar-entity selected');
        $.get("<?php echo site_url().'/pages/us3_account_edit_contact_form' ?>", function(data){
                $(".main-section").empty();
                $(".main-section").html(data);
        });
    });
    
    $("#edit-qualification").on('click',function(){
        $(this).parent().show();
        $(".nav-bar-entity").attr('class', 'nav-bar-entity');
        $(this).attr('class', 'nav-bar-entity selected');
        $.get("<?php echo site_url().'/pages/us3_account_edit_qualification_form' ?>", function(data){
                $(".main-section").empty();
                $(".main-section").html(data);
        });
    });
    
    $("#edit-experience").on('click',function(){
        $(this).parent().show();
        $(".nav-bar-entity").attr('class', 'nav-bar-entity');
        $(this).attr('class', 'nav-bar-entity selected');
        $.get("<?php echo site_url().'/pages/us3_account_edit_workedplaces_form' ?>", function(data){
                $(".main-section").empty();
                $(".main-section").html(data);
        });
    });
    
    $("#edit-hobbies").on('click',function(){
        $(this).parent().show();
        $(".nav-bar-entity").attr('class', 'nav-bar-entity');
        $(this).attr('class', 'nav-bar-entity selected');
        $.get("<?php echo site_url().'/pages/us3_account_edit_hobbies_form' ?>", function(data){
                $(".main-section").empty();
                $(".main-section").html(data);
        });
    });
    
    $("#edit-activities").on('click',function(){
        $(this).parent().show();
        $(".nav-bar-entity").attr('class', 'nav-bar-entity');
        $(this).attr('class', 'nav-bar-entity selected');
        $.get("<?php echo site_url().'/pages/us3_account_edit_activities_form' ?>", function(data){
                $(".main-section").empty();
                $(".main-section").html(data);
        });
    });
    
    $(document).ready(function() {
        <?php
        $section = $_GET['section'];
        if ($section == "account-management" || empty($section)) {
            echo '$("#account-management").click();';
        } elseif ($section == "edit-contact") {
            echo '$("#edit-contact").click();';
        } elseif ($section == "edit-qualification") {
            echo '$("#edit-qualification").click();';
        } elseif ($section == "edit-experience") {
            echo '$("#edit-experience").click();';
        } elseif ($section == "edit-hobbies") {
            echo '$("#edit-hobbies").click();';
        } elseif ($section == "edit-activities") {
            echo '$("#edit-activities").click();';
        }
        ?>
    });
    
</script>